<template>
  <view class="mine_page">
    <u-navbar fixed placeholder bgColor="#fff">
      <template #left>
        <text class="nav_title">我的</text>
      </template>
    </u-navbar>
    <view class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
      <image src="@/static/img/mine/person_bg.png" class="mine_bg"></image>
      <view class="account_info">
        <view class="left">
          <image src="@/static/img/profile.jpg" mode="widthFix"></image>
        </view>
        <view class="right">
          <view class="userName">{{nickName}}</view>
          <view class="account">账号：{{phoneNumber}}</view>
        </view>
      </view>
      <view class="operate_list">
        <view class="operate_item" @click="userInfoHandle">
          <view class="left">
            <image src="@/static/img/mine/person_icon.png"></image>
            <text>个人信息</text>
          </view>
          <view class="right">
            <image src="@/static/img/mine/right_icon.png"></image>
          </view>
        </view>
        <view class="operate_item">
          <view class="left">
            <image src="@/static/img/mine/connection_icon.png"></image>
            <text>联系景区</text>
          </view>
          <view class="right">
            <image src="@/static/img/mine/right_icon.png"></image>
          </view>
        </view>
        <view class="operate_item" @click="logout">
          <view class="left">
            <image src="@/static/img/mine/logout_icon.png"></image>
            <text>退出登录</text>
          </view>
          <view class="right">
            <image src="@/static/img/mine/right_icon.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import {showConfirm} from "@/utils/common";
import { mapGetters } from "vuex";
import store from "@/store";

export default {
  data() {
    return {}
  },
  computed:{
    ...mapGetters(['nickName', 'phoneNumber']),
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    }
  },
  methods: {
    logout() {
      showConfirm('是否退出登录?').then(res => {
        if (res.confirm) {
          store.dispatch('LogOut').then(res => {
            uni.reLaunch({ url: '/pages/login/login' })
          })
        }
      })
    },
    userInfoHandle() {
      uni.navigateTo({
        url: '/pages/mine/userInfo'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.mine_page {
  height: 100vh;
  width: 100vw;

  .nav_title {
    font-size: 36rpx;
    color: #000000;
    font-weight: 400;
  }

  .content {
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    position: relative;
    .mine_bg {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .account_info {
      display: flex;
      margin-top: 48rpx;
      .left {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
        border: 2px solid #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 100%;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 16rpx;
        padding-top: 8rpx;
        .userName {
          font-size: 32rpx;
          font-weight: 500;
          color: #333335;
        }
        .account {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 16rpx;
        }
      }
    }
    .operate_list {
      margin-top: 26rpx;
      display: flex;
      flex-direction: column;
      .operate_item {
        margin-top: 32rpx;
        height: 144rpx;
        background: #FEFEFE;
        border-radius: 24rpx;
        padding: 0 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          image {
            width: 48rpx;
            height: 48rpx;
          }
          text {
            font-size: 32rpx;
            font-weight: 400;
            color: #333333;
            margin-left: 24rpx;
          }
        }
        .right {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
</style>
